<template>
    <view class="body">
      <view class="demo-nav">
        <view class="demo-nav__title">代金券</view>

      </view>
      <view class="container">
        <view class="coupon-list">
          <view class="sawtooth-bor item" v-for="coupon in couponList" :key="coupon.couponId">
            <view class="pt10 discount" style="padding-top: 10px;">
              <view class="fs12">{{coupon.shopsName}}</view>
              <view class="fs12">满{{coupon.couponPriceMost}}减{{coupon.couponPrice}}</view>
              <view class="fs12">有效期{{coupon.modifiedTime}} - {{coupon.couponTime}}</view>
            </view>
            <view class="textc receive" @click="toSupplier(coupon.supplierId)">立即使用</view>
          </view>
        </view>
      </view>
    </view>
</template>

<script>

  import { selectCustomerCoupon } from '@/api/customer/customer.js'

  export default {
    name: "my_vouchers",
    data(){
      return{
        couponList: [],
      }
    },
    created(){
      this.getList();
    },
    methods: {
      //返回上一层
      toBack(){
        this.$router.go(-1);
      },
      // 查询优惠券列表
      getList(){
        selectCustomerCoupon().then((res) =>{
          console.log(res.data.data);
          this.couponList = res.data.data
        })
      },
      // 去使用
      toSupplier(supplierId){
        //this.$router.push({path:"/shop_home",query:{ shopId:supplierId }});
		uni.navigateTo({
			url:"/pages/mine_Kimsvolume/shop_home?shopId="+supplierId
		})
      },
    },
  }
</script>

<style scoped>
  .body{
    width: 100%;
    min-height: 100%;
  }
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .coupon-list {
    width: 370px;
    margin: 0 auto;
  }

  .coupon-list .item:first-child {
    margin-top: 20px;
  }

  .coupon-list .item {
    width: 370px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  /* 第一个 */
  .sawtooth-bor {
    display: flex;
    color: #fff;
    padding-left: 0.5rem;
    box-sizing: border-box;
    /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
    background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
    /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
    background-size: 30px 28px;
    /* 根据优惠券view大小进行微调 */
    background-position: 16px 0px;
    background-color: #fff;
    position: relative;
  }

  .sawtooth-bor:before {
    content: ' ';
    display: block;
    /* 用相同的颜色覆盖 */
    background-color: #F35C3B;
    /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 为锯齿保留的距离 */
    left: 20px;
    right: 20px;
    z-index: -1;
  }

  .discount {
    border-right: 2px dashed #f5f5f5;
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
    background-color: #F35C3B;
  }

  .receive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffb937;
  }
</style>
